<template>
  <div>
    <nav class="logo">
      <div>
        <img src="../assets/img/wangcheng1.jpg" alt />
      </div>
      <p>ttzxh的后台管理系统</p>
      <div class="right">
        <img :src="avatar" alt />
        <el-button type="danger" @click="logOut">退出</el-button>
      </div>
    </nav>
    <div class="BackBox">
      <el-col :span="3">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户</span>
            </template>
            <el-menu-item @click="GoUserOption" index="1-1" style="minWidth: 0; overflow: hidden; paddingright: 0">用户操作</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>消息</span>
            </template>
            <el-menu-item @click="GoMessageOption" index="2-1" style="minWidth: 0; overflow: hidden; paddingright: 0">消息操作</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>视频</span>
            </template>
            <el-menu-item index="3-1" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GovideoOption">视频操作</el-menu-item>
            <el-menu-item index="3-2" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GovideoFilter">专栏操作</el-menu-item>
            <el-menu-item index="3-3" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GoAddVideo">添加视频</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>博客</span>
            </template>
            <el-menu-item index="4-1" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GoBlogOP">博客操作</el-menu-item>
            <el-menu-item index="4-2" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GoRemark">博客图表</el-menu-item>
            <el-menu-item index="4-3" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GoBlogWrite">博客写作</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航</span>
            </template>
            <el-menu-item index="5-1" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GoNavigation">导航操作</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>文件</span>
            </template>
            <el-menu-item index="6-1" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GoPDFOption">文件操作</el-menu-item>
            <el-menu-item index="6-2" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GoPDFChart">文件图表</el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>音乐</span>
            </template>
            <el-menu-item index="7-1" style="minWidth: 0; overflow: hidden; paddingright: 0" @click="GoMusic">音乐操作</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="21" style="position:relative;">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-col>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class index extends Vue {
  get avatar() {
    return this.$store.state.user.userInfo.avatar
  }
  GoUserOption(): void {
    if (this.$route.path !== '/user') {
      this.$router.push('/user')
    }
  }
  handleOpen(key: any, keyPath: any): void {
    console.log(key, keyPath)
  }
  handleClose(key: any, keyPath: any): void {
    console.log(key, keyPath)
  }
  logOut(): void {
    this.$store.commit('user/changeUserInfo', {})
    this.$store.commit('user/changeLoginStatus', false)
    this.$store.commit('login/changeLoginStatus', false)
    localStorage.clear()
    this.$router.push('/login')
  }
  GoMessageOption(): void {
    if (this.$route.path !== '/message') this.$router.push('/message')
  }
  GoNavigation(): void {
    if (this.$route.path !== '/navigation') {
      this.$router.push('/navigation')
    }
  }
  GovideoOption(): void {
    if (this.$route.path !== '/option') this.$router.push('/option')
  }
  GoMusic(): void {
    if (this.$route.path !== '/music') {
      this.$router.push('/music')
    }
  }
  GoAddVideo(): void {
    if (this.$route.path !== '/addVideo') {
      this.$router.push('/addVideo')
    }
  }
  GovideoFilter(): void {
    if (this.$route.path !== '/filter') this.$router.push('/filter')
  }
  GoBlogOP(): void {
    if (this.$route.path !== '/blog') this.$router.push('/blog')
  }
  GoRemark(): void {
    if (this.$route.path !== '/chat') this.$router.push('/chat')
  }
  GoPDFChart(): void {
    if (this.$route.path !== '/pdfChart') {
      this.$router.push('/pdfChart')
    }
  }
  GoBlogWrite(): void {
    if (this.$route.path !== '/write') {
      this.$router.push('/write')
    }
  }
  GoPDFOption(): void {
    if (this.$route.path !== '/pdfOption') this.$router.push('/pdfOption')
  }
}
</script>

<style lang="less" scoped>
@import url('../assets/css/less.less');
.logo {
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  background-color: #545c64;
  .fixed(space-between);
  padding: 0 25px;
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: bisque;
  }
  p {
    color: #fff;
    font-weight: 1000;
    font-size: 25px;
  }
  .right {
    .center;
    img {
      margin: 0 15px;
    }
  }
}
.BackBox {
  min-width: 0;
}
.el-menu-vertical-demo {
  height: calc(100vh - 70px);
}
</style>